<!DOCTYPE html>
<html>
	<head>
	<title>Hunter</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="/css/bootstrap.min.css" rel="stylesheet">

		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="/js/bootstrap.min.js"></script>
	</head>
	<body style="padding-top: 90px;">
		<script type="text/javascript">
			function hardwardSearch(cpuName,displayCardName,memoryName,hardDiskName) {
				$.ajax({
					url:"/computers/hardwareSearch",
					data:{
						"cpuName":cpuName,
						"displayCardName":displayCardName,
						"memoryName":memoryName,
						"hardDiskName":hardDiskName
					},
					type:'get',
					success:function (data) {
						sessionStorage.setItem("data",JSON.stringify(data));

						window.open("http://localhost:8080/computers/computerResultPage", "_self");
					}

				});
			}
		</script>
		<!-- 上部导航栏 -->
		<div class="row-fluid">
			<nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="background-color: #660066;">
				<div class="container-fluid">
					<div class="navbar-header">
						<a class="navbar-brand" style="margin-left: 20px;color: rgb(255, 255, 255);" href="http://localhost:8080/hello/home">主页</a>
					</div>
					<div>
						<ul class="nav navbar-nav">
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="font-size: 18px;margin-left: 40px;color: rgb(255, 255, 255);">
									硬件信息
									<b class="caret"></b>
								</a>
								<ul class="dropdown-menu" style="background-color: #660066;">
									<li><a href="http://127.0.0.1:8080/computers/hardwareKonwledgePage" style="font-size: 18px;color: rgb(255, 255, 255);">CPU</a></li>
									<li><a href="http://127.0.0.1:8080/computers/hardwareKonwledgePage" style="font-size: 18px;color: rgb(255, 255, 255);">显卡</a></li>
									<li><a href="http://127.0.0.1:8080/computers/hardwareKonwledgePage" style="font-size: 18px;color: rgb(255, 255, 255);">内存</a></li>
									<li><a href="http://127.0.0.1:8080/computers/hardwareKonwledgePage" style="font-size: 18px;color: rgb(255, 255, 255);">硬盘</a></li>
									<li><a href="http://127.0.0.1:8080/computers/hardwareKonwledgePage" style="font-size: 18px;color: rgb(255, 255, 255);">笔记本</a></li>
								</ul>
							</li>
						</ul>
					</div>
					<div class="navbar-header">
						<a class="navbar-brand" href="#" style="margin-left: 40px;color: rgb(255, 255, 255);">社区交流</a>
					</div>
					<div>
						<form class="navbar-form navbar-left" role="search" style="margin-left: 650px;">
							<div class="form-group">
								<input type="text" class="form-control" placeholder="输入查找的内容" style="width: 300px;"/>
							</div>
							<a href="https://www.baidu.com/">
								<img src="/img/search.png" width="35px" height="35px"/>
							</a>
						</form>
					</div>
					<div>
						<a href="https://www.baidu.com/"><img src="/img/头像.png" style="width: 37px;margin-top: 8px;"/></a>
					</div>
				</div>
			</nav>
		</div>
		<!-- 左部导航栏 -->
		<div class="col-md-2" style="margin-left:0px;margin-top:40px;">
				<div class="panel-group" id="accordion" >
					<div class="panel panel-default" >
						<div class="panel-heading" style="background-color: purple;">
			    <h5 class="panel-title">
				   <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
				   <h5><span class="glyphicon glyphicon-th-list" style="color: rgb(231, 237, 238); font-size: 20px;"> 功能页面</span></h5>
				   </a>
			    </h5>
		   		</div>
		    <div id="collapseOne" class="panel-collapse collapse in">
			    <div class="panel-body">
					<div class="list-group">
						<a class="list-group-item" style="color: rgb(117, 75, 187); font-size: 19px;" href="http://127.0.0.1:8080/information1">热点资讯</a>
						<a class="list-group-item" style="color: rgb(117, 75, 187); font-size: 19px;" href="http://localhost:8080/computers/hardwareSearchPage.html">硬件匹配</a>
						<a class="list-group-item" style="color: rgb(117, 75, 187); font-size: 19px;" href="http://localhost:8080/computers/keywordSearchtPage">关键字匹配</a>
						<a class="list-group-item" style="color: rgb(117, 75, 187); font-size: 19px;" href="http://localhost:8080/computers/computerResultPage">电脑猎场</a>
					</div>
			    </div>
		    </div>
				</div>
			</div>
		</div>
		<div class="col-md-10">
			<div class="page-header">
				<h1 style="letter-spacing: 5px;font-family: 微软雅黑;font-weight: bold;">硬件匹配</h1>
			</div>
			<div>
				<div class="col-md-3">
					<div class="thumbnail" style="background-color: #660066;color: white;border-radius: 30px/30px;">
						<img alt="300x200" src="/img/cpu.jpg" style="border-radius: 50px/50px; width: 120px;height: 140px;"/>
						<div class="caption" style="color: white;">
							<h3 style="text-align: center;font-family: 微软雅黑;font-weight: bold;">CPU</h3>
							<p style="font-weight: bold;text-align: center;">第九代英特尔酷睿i7-9750H 6核12线程</p>
							<br>
							<p style="height: 60px;">好的CPU能够让你的电脑在运行程序与游戏更为流畅，加载程序的速度也更快</p>
						</div>
						<div>
							<input id="cpu" type="text" list="data1" placeholder="选择" style="color: black; font-weight: bold; width: 160px; text-align: center;margin-left: 57px;">
						</div>
					</div>
				</div>
				<div class="col-md-3">
					<div class="thumbnail" style="background-color: #660066;color: white;border-radius: 30px/30px;">
						<img alt="300x200" src="/img/显卡.jpg" style="border-radius: 50px/50px; width: 120px;height: 140px;"/>
						<div class="caption" style="color: white;">
							<h3 style="text-align: center;font-family: 微软雅黑;font-weight: bold;">显卡</h3>
							<p style="font-weight: bold;text-align: center;">GeForce GTX1650</p>
							<br>
							<p style="height: 60px;">好的显卡能够让你的电脑在运行游戏时画面更加清晰以及更具表现力，同时你的画面也不会出现卡顿现象</p>
						</div>
						<div>
							<input id="displayCard" type="text" list="data1" placeholder="选择" style="color: black; font-weight: bold; width: 160px; text-align: center;margin-left: 57px;">
						</div>
					</div>
				</div>
				<div class="col-md-3">
					<div class="thumbnail" style="background-color: #660066;color: white;border-radius: 30px/30px;">
						<img alt="300x200" src="/img/内存.jpg" style="border-radius: 50px/50px; width: 120px;height: 140px;"/>
						<div class="caption" style="color: white;">
							<h3 style="text-align: center;font-family: 微软雅黑;font-weight: bold;">内存</h3>
							<p style="font-weight: bold;text-align: center;">8GB DDR4 2666MHz</p>
							<br>
							<p style="height: 60px;">好的内存可以让你打开程序或是游戏的时间更短，并且也可以让你的游戏更加流畅</p>
						</div>
						<div>
							<input id="memory" type="text" list="data1" placeholder="选择" style="color: black; font-weight: bold; width: 160px; text-align: center;margin-left: 57px;">
						</div>
					</div>
				</div>
				<div class="col-md-3">
					<div class="thumbnail" style="background-color: #660066;color: white;border-radius: 30px/30px;">
						<img alt="300x200" src="/img/硬盘.jpg" style="border-radius: 50px/50px; width: 120px;height: 140px;"/>
						<div class="caption" style="color: white;">
							<h3 style="text-align: center;font-family: 微软雅黑;font-weight: bold;">硬盘</h3>
							<p style="font-weight: bold;text-align: center;">PCIE 512G固态硬盘</p>
							<br>
							<p style="height: 60px;">一个好的硬盘可以让电脑存放更多的文件，电脑固态硬盘的存取比机械硬盘更快</p>
						</div>
						<div>
							<input id="hardDisk" type="text" list="data1" placeholder="选择" style="color: black; font-weight: bold; width: 160px; text-align: center;margin-left: 57px;">
						</div>
					</div>
				</div>
			</div>
		</div>
		<svg  width="100%" height="100%">
			<polyline points="425,0 425,35 890,50" style="fill:none;stroke:#660066;stroke-width:3" />
			<polyline points="735,0 735,35 890,50" style="fill:none;stroke:#660066;stroke-width:3" />
			<polyline points="1045,0 1045,35 890,50" style="fill:none;stroke:#660066;stroke-width:3" />
			<polyline points="1355,0 1355,35 890,50" style="fill:none;stroke:#660066;stroke-width:3" />
			<polyline points="890,50 890,100" style="fill:none;stroke:#660066;stroke-width:3" />
		</svg>
		<div class="col-md-10" style="margin-top: -60px; padding-left: 850px;">
			<button type="button" onclick="hardwardSearch(document.getElementById('cpu').value,
			document.getElementById('displayCard').value,
			document.getElementById('memory').value,
			document.getElementById('hardDisk').value)" class="btn btn-default" style=" background-color: #660066;font-weight: bold;color: white;">开始查找</button>
		</div>
		<datalist id="data1">
			<option>123</option>
			<option>456</option>
			<option>789</option>
		</datalist>
	</body>
</html>